<template>
  <div class="interviewEvaluate-wrap">
    <div class="interviewEvaluate-top">
      <div class="overall-merit">
        <div class="overall-title">综合评分：</div>
        <img :src="item" v-for="(item, index) in totalScore" :key="index">
        <p>{{evaluateData.sumMultiple}}</p>
      </div>
      <div class="overall-info">
        <span>描述相符：{{evaluateData.sumDescribeAgree}}</span>
        <span>面试官：{{evaluateData.sumInterviewer}}</span>
        <span>公司环境：{{evaluateData.sumEnvironment}}</span>
      </div>
    </div>
    <!-- 最新评价 -->
    <div class="detail-small-title"><p></p>最新评价</div>
    <div class="evaluate-list">
      <div class="evaluate-item" v-for="(item, index) in evaluateList" :key="index">
        <img :src="item.photo" class="photo">
        <div class="evaluate-content">
          <div class="base-content">
            <div class="base">{{item.name}}</div>
            <div class="base"><span>面试职位：</span>{{item.jobName}}</div>
            <div class="base"><span>{{item.evaluationDate}}</span></div>
          </div>
          <div class="evaluate-score">
            <div class="score-title">综合评分：</div>
            <img :src="xing" v-for="(xing, xingi) in handleXingShow(item.sumMultiple)" :key="xingi">
          </div>
          <div class="evaluate">{{item.evaluateLabel}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import talents from '@/api/talents'
export default {
  data () {
    return {
      evaluateData: talents.evaluateData,
      evaluateList: talents.evaluateData.evaluateList,
      totalScore: [] // 综合评分-总的
    }
  },
  mounted () {
    this.totalScore = this.handleXingShow(this.evaluateData.sumMultiple)
  },
  methods: {
    // 显示星星评分
    handleXingShow (val) {
      const num = parseInt(val) // 向上取整
      const upNum = Math.ceil(val)
      const numString = val.toString()
      const arr = []
      if (val === 5) {
        for (let i = 0; i < 5; i++) {
          arr.push('/img/talents/company/y-xing.png')
        }
        return arr
      } else {
        if (numString.indexOf('.')!==-1) {
          for (let i = 0; i < 5; i++) {
            if (i < num) {
              arr.push('/img/talents/company/y-xing.png')
            } else if (i === num) {
              arr.push('/img/talents/company/ban-xing.png')
            } else {
              arr.push('/img/talents/company/n-xing.png')
            }
          }
        } else {
          for (let i = 0; i < 5; i++) {
            if (i < val) {
              arr.push('/img/talents/company/y-xing.png')
            } else {
              arr.push('/img/talents/company/n-xing.png')
            }
          }
        }
        return arr
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.interviewEvaluate-wrap {
  .interviewEvaluate-top {
    background: #FAFAFA;
    border-radius: 8px;
    padding: 30px 20px
    .overall-merit {
      display: flex;
      align-items: center;
      .overall-title {
        font-size: 14px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #181818;
        margin-right:10px
      }
      img {
        width:26px;
        height:26px
      }
      p {
        font-size: 30px;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #181818;
        margin-left: 14px
      }
    }
    .overall-info {
      margin-top: 25px
      span {
        font-size: 16px;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        font-weight: 400;
        color: #767676;
        &:nth-child(1) {
          margin-right: 170px
        }
        &:nth-child(2) {
          margin-right: 181px
        }
      }
    }
  }
  .evaluate-list {
    .evaluate-item {
      display:inline-block;
      padding: 30px 0;
      border-bottom: 1px solid #F1F1F1
      .photo {
        width: 50px;
        height: 50px;
        margin-right: 14px;
        float: left
      }
      .evaluate-content {
        float: left
        .base-content {
          display: flex;
          justify-content: space-between
          .base {
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #181818;
            span {
              color: #A1A1A1;
            }
          }
        }
        .evaluate-score {
          display: flex;
          align-items: center;
          margin-top: 18px
          .score-title {
            font-size: 14px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #A1A1A1;
          }
          img {
            width: 20px;
            height: 20px;
          }
        }
        .evaluate {
          width: 686px;
          line-height: 24px;
          font-size: 14px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #404040;
          margin-top:20px
        }
      }
    }
  }
}
</style>